<template>
  <div class="grid-management">
    <div class="grid-management__select">
      <div class="grid-management__select-city">
        <el-select v-model="city" size="mini" @change="getData">
            <el-option
              v-for="(item, i) in cityList"
              :key="i"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
      </div>
    </div>
    <div class="grid-management__content">
      <div class="wxq">
        <span>微信群</span>
        <span><span class="num">{{wxq}}</span>个</span>
      </div>
      <ve-pie :data="chartData" :settings="pieSettings" :extend="pieExtend" width="25rem" height="10rem"></ve-pie>
    </div>
  </div>
</template>
<script>
import { Select, Option } from 'element-ui'
import Vpie from 'v-charts/lib/pie.common'
import { milliFormat ,formatFontSize} from 'js/utils'
import { getWghgl } from 'src/api/api'
import storage from 'good-storage'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Vpie.name]: Vpie,
  },
  data(){
    return {
      cityList: storage.get('cityList'),
      city: storage.get('cityList')[0],
      chartData: {
        columns: ['name', 'value'],
        rows: [],
      },
      pieSettings: {
        // roseType: 'radius',
        radius: formatFontSize(0.5),
        // offsetY: 100,
        // labelLine: {
        //   length: 5,
        //   length2: 5,
        // },
        label: {
          show: false,
          position: 'inner',
          color: '#0B153A',
          fontSize: 10
        }
      },
      pieExtend: {
        title: {
          text: '用户群体',
          textStyle: {
            color: '#7CA1D2',
            fontSize: formatFontSize(0.12),
          },
          left: '28%',
          bottom: '0',
        },
        tooltip: {
          show: true,
          position: ['30%', '50%'],
        },
        color: ['#EDB049', '#45F0EA', '#0E962A'],
        legend: {
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          selectedMode: false,
          orient: 'vertical',
          align: 'left',
          right: 0, 
          top: '30%',
          itemWidth: formatFontSize(0.12),
          itemHeight: formatFontSize(0.06),
          formatter: param => {
            let data = this.chartData.rows
            let target
            for(let i=0; i<data.length; i++) {
              if(data[i].name == param) {
                target = this.milliFormat(data[i].value)
              }
            }
            return param + '       '+ target + '户'
          }
        },
        series: {
          center: ['35%', '50%']
        },
      },
      wxq: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    milliFormat(num) {
      return milliFormat(num)
    },
    getData() {
      let params = {
        city: this.city
      }
      getWghgl(params).then(res=> {
        this.wxq = res.data.wxq
        this.chartData.rows = [
          {name: 'A类用户', value: res.data.alyh},
          {name: 'B类用户', value: res.data.blyh},
          {name: 'C类用户', value: res.data.clyh},
        ]
      })
    }
  }
}
</script>
<style lang="scss">
.grid-management {
  &__select {
    text-align: right;
    padding: 5px 20px 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #AAECFF;
    .el-select, .el-date-editor {
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-city {
      .el-select {
        width: 100px;
      }
    }
    .el-checkbox {
      color: #AAECFF;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #AAECFF;
    }
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  &__content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    .wxq {
      width:100px;
      height:100px;
      background:rgba(255,255,255,0.14);
      border-radius:9px;
      color: #7CA1D2;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .num {
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(69,240,234,1);
        line-height: 40px;
      }
    }
  }
}
</style>